<template>
  <div class="article-card">
    <h3>{{ article.title }}</h3>
    <p>{{ article.tags }}</p>
    <router-link :to="`/article/${article.id}`">阅读全文 →</router-link>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

interface Article {
  id: number
  title: string
  tags: string
}

const props = defineProps<{ article: Article }>()
</script>

<style scoped>
.article-card {
  padding: 15px;
  background: white;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.article-card h3 {
  margin: 0 0 10px;
}
.article-card p {
  color: #555;
}
</style>
